<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../../node_modules/echarts/dist/echarts.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <link rel="stylesheet" href="../../index.css">

    <!-- <link rel="stylesheet" href="../static/css/Modvalue.css"> -->
     <!-- PC -->
     <link rel="stylesheet" href="../static/css/Modvalue.css" media="only screen and (max-height:1600px) ">
     <!-- 手机App -->
     <link rel="stylesheet" href="../static/css/ModvalueApp.css" media="only screen and (min-height:1600px) ">
</head>

<body>
    <!--主体-->
    <div class="main clearfix" id="app">
        <div class="header" style="padding-top: 25px; ">
            <header>
                <div class="navbar">
                    <div class="card A">
                        <ul>
                            <li>
                                <h8 style="line-height: 78px;">模具价值看板</h8>
                            </li>
                        </ul>

                    </div>
                    <div class="card B">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h4>客户</h4>
                            </li>
                            <li class="list-group-item1">
                                <h3 id="WaitPrtQty">0
                                </h3>
                            </li>
                        </ul>
                    </div>
                    <div class="card C" >
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h4>员工</h4>
                            </li>
                            <li class="list-group-item1">
                                <h3 id="Waitcompleted">{{defaultDt2.length}}人</h3>
                            </li>
                        </ul>
                    </div>
                    <div class="card C" >
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h4>项目组</h4>
                            </li>
                            <li class="list-group-item1">
                                <h3 id="Waitcompleted">{{defaultDt3.length}}个</h3>
                            </li>
                        </ul>
                    </div>
                    <div class="card C">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h4>设备</h4>
                            </li>
                            <li class="list-group-item1">
                                <h3 id="Col8Qty1">{{defaultDt4.length}}台</h3>
                            </li>
                        </ul>
                    </div>
                </div>
            </header>
        </div>


        <div class="body_div">
            <div class="main-left">
                <div class="border-container3">
                    <div class="name-title">
                        客户价值(前10)
                    </div>
                    <div>
                        <el-table :data="defaultDt1" :default-sort="{prop: 'date', order: 'descending'}" stripe="true" ref="defaultDt1" :height=el_table_height4 :cell-style="{padding:3+'px'}">
                            <el-table-column prop="ClientCode" align="center" label="客户编号">
                            </el-table-column>
                            <el-table-column align="center" label="客户年价值占比">
                                <template slot-scope="scope">
                                    <div v-html="Kecutout(scope)">
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
                <div class="border-container3">
                    <div>
                        <div id="echarts_i"></div>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
            <div class="center">
                <div class="border-container1">
                    <div class="name-title">
                        员工价值
                    </div>
                    <div>
                        <el-table :data="defaultDt2" stripe="true" ref="defaultDt2" :default-sort="{prop: 'Profit', order: 'descending'}" :height=el_table_height3 :cell-style="{padding:3+'px'}">
                            <el-table-column prop="Name" align="center" label="员工姓名">
                            </el-table-column>
                            <el-table-column prop="昨日价值" align="center" label="昨日价值">
                            </el-table-column>
                            <el-table-column prop="本月价值" align="center" label="本月价值">
                            </el-table-column>
                            <el-table-column prop="本年价值" align="center" label="本年价值">
                            </el-table-column>
                            <el-table-column prop="income" align="center" label="本年收入">
                                <!-- <template scope="scope">
                                    <span v-if="scope.row.income>scope.row.本年价值" style="color:red">{{ scope.row.income }}</span>
                                    <span v-else style="color: #00ffff">{{ scope.row.income }}</span>
                                </template> -->
                            </el-table-column>
                            <el-table-column prop="Profit" align="center" label="价值盈亏">
                                <template scope="scope">
                                    <span v-if="scope.row.Profit<0" style="color:red">{{ scope.row.Profit }}</span>
                                    <span v-else style="color: #00ffff">{{ scope.row.Profit }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
            <div class="main-right">
                <div class="border-container2">
                    <div class="name-title">
                        小微账户
                    </div>
                    <div>
                        <el-table :data="defaultDt3" :default-sort="{prop: 'date', order: 'descending'}" stripe="true" :height=el_table_height1 ref="defaultDt3" :cell-style="{padding:3+'px'}">
                            <el-table-column prop="MkCode" align="center" label="小微代号">
                            </el-table-column>
                            <el-table-column prop="本月收入" align="center" label="本月收入">
                            </el-table-column>
                            <el-table-column prop="本月支出" align="center" label="本月支出">
                            </el-table-column>
                            <el-table-column prop="BalanceAmt" align="center" label="小微余额">
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
                <div class="border-container">
                    <div class="name-title">
                        设备价值
                    </div>
                    <div>
                        <el-table :data="defaultDt4" :default-sort="{prop: 'date', order: 'descending'}" stripe="true" :height=el_table_height2 ref="defaultDt4" :cell-style="{padding:3+'px'}">
                            <el-table-column prop="AsEqName" align="center" label="设备名称">
                            </el-table-column>
                            <el-table-column align="center" label="月稼动时长分析">
                                <template slot-scope="scope">
                                    <div v-html="Scutout(scope)">
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="jdl" width="80" align="center" label="月稼动率">
                            </el-table-column>
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
        </div>
    </div>

</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                el_table_height1: 330,
                el_table_height2: 520,
                el_table_height3: 900,
                el_table_height4: 422,
                echarts_i: null,
                defaultDt1: [],
                defaultDt2: [],
                defaultDt3: [],
                defaultDt4: [],
                option: {
                    title: {
                        top: '2%',
                        text: '行业细分图',
                        left: 'left',
                        textStyle: { //图例文字的样式
                            color: '#12f0e9 ',
                            fontSize: 20

                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '10%',
                        left: 'center',
                        textStyle: { //图例文字的样式
                            color: 'white ',
                            fontSize: 14

                        },
                    },
                    series: [{
                        name: 'Access From',
                        type: 'pie',
                        top: '20%',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold',
                                color: '#12f0e9'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [],

                    }]
                }
            }
        },
        methods: {


            GetTabelDate(that) {
                // 客户价值
                GetCodeData("VB21091316254845", "Get", "value").then(function(res) {
                        that.defaultDt1 = res.rows
                    }),
                    //员工价值
                    GetCodeData("VB21091314082298", "Get", "value").then(function(res) {
                        that.defaultDt2 = res.rows
                    }),
                    //小微价值
                    GetCodeData("VB21091314555680", "Get", "value").then(function(res) {
                        that.defaultDt3 = res.rows
                    }),
                    //设备价值
                    GetCodeData("VB21091410510347", "Get", "value").then(function(res) {
                        that.defaultDt4 = res.rows
                    }),
                    //客户图形
                    GetCodeData("VB21092309075363", "Get", "value").then(function(res) {
                        that.option.series[0].data = res.rows
                        that.echarts_i.setOption(that.option);
                    }),
                    //客户总数
                    GetCodeData("VB21092315174260", "Get", "value").then(function(res) {
                        $('#WaitPrtQty').text("" + res.rows[0].Column1 + "家")
                    })
            },
            //客户价值
            Kecutout(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.TaxAmtOrd * 100 / cellValue.row.Total;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.TaxAmtOrd < cellValue.row.Total) {
                        _color = "#00a000";
                    } else if (cellValue.row.TaxAmtOrd > cellValue.row.Total) {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }

                    _html += ("<div  style='position: relative; width:160px;padding: 0px;background:#4199fe;overflow: hidden;height:27px;border: 1px solid #95b8e7;'><div style='width: " + _width1 + "%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                        "</div>" +
                        "<div style='position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:black;'>" + cellValue.row.Percentage + "%" + "</div>" +
                        "</div>" +
                        "");
                    return _html;
                }
            },
            //设备价值
            Scutout(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div style='display: flex;''>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.time * 100 / cellValue.row.StandardMoyTime;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.time < cellValue.row.StandardMoyTime) {
                        _color = "#00a000";
                    } else if (cellValue.row.time > cellValue.row.StandardMoyTime) {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }

                    _html += ("<div  style='border-radius:15px;position: relative; width:150px;padding: 0px;background:#4199fe;overflow: hidden;height:27px;border: 1px solid #95b8e7;'><div style='border-radius:15px;width: " + _width1 + "%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                        "</div>" +
                        "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:black;'>" + cellValue.row.time + "/" + cellValue.row.StandardMoyTime + "</div>" +

                        "</div>");
                    return _html;
                }
            }
        },

        mounted() {
            TableAotoRoll([this.$refs.defaultDt1, this.$refs.defaultDt2, this.$refs.defaultDt3, this.$refs.defaultDt4])
            var that = this
            setTimeout(function() {
                that.echarts_i = echarts.init(document.getElementById('echarts_i')),
                    that.GetTabelDate(that)
            }, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000 * 60);
        }
    })
</script>



</html>